.container {
  @apply h-10 inline-flex items-center gap-0;

  &.size-small {
    @apply h-6;
  }

  &.size-large {
    @apply h-12;
  }

  &.disabled {
    @apply pointer-events-none opacity-50;
  }
}

.labels {
  @apply flex items-center gap-tight px-base;
}

.navigation {
  @apply flex h-full items-center rounded border border-neutral-border bg-neutral-background;

  .container.disabled & {
    @apply pointer-events-none;
  }
}

.divider {
  @apply w-px h-[30px] bg-neutral-border;

  .size-small & {
    @apply h-5;
  }
}

.bullet-divider {
  @apply px-2 text-neutral-content-subtler;

  .size-small & {
    @apply px-1;
  }
}

.button {
  @apply w-[37px] h-full;
  @apply disabled:pointer-events-none disabled:opacity-50 p-0;

  border-radius: 0;

  .size-small & {
    @apply w-6;
  }

  &.disabled {
    @apply pointer-events-none text-neutral-content-subtlest;
  }

  &.button-first {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  &.button-last {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
}

.input {
  @apply w-[100px] h-[38px] text-center flex items-center justify-center;
  @apply border-x border-neutral-border bg-neutral-surface;
  @apply my-[1px] text-neutral-content;

  .size-small & {
    @apply h-[30px] text-sm;
  }

  input {
    @apply w-full h-full border-none m-0 p-0 outline-none text-center;
    @apply bg-transparent font-medium text-base leading-[19px] text-neutral-content;

    .size-small & {
      @apply text-sm leading-[15px];
    }
  }
}

.page-indicator {
  @apply font-medium text-base leading-[19px] flex-1 select-none cursor-pointer;

  .size-small & {
    @apply text-sm leading-[15px];
  }

  span {
    @apply font-normal opacity-40;
  }
}

.page-size {
  @apply min-w-[170px] pl-4;

  .size-small & {
    @apply min-w-[130px] pl-2;
  }
}

